<template>
  <div>
    <div class="text">手机验证码登录</div>
    <el-input v-model="mobile" placeholder="请输入用户名"></el-input>
    <div class="password_box">
        <el-input v-model="code" placeholder="请输入验证码"></el-input>
        <span class="code_tip" @click="send">获取验证码</span>
    </div>
    <el-button type="warning" class="but" @click="login" round>登录</el-button>
    <div class="tet">登录及注册并代表同意<el-button type="text" @click="bt">用户协议</el-button></div>
  </div>
</template>

<script>
export default {
 data(){
    return{
        mobile:'',
        code:''
    }
 },
 methods:{
    bt(){
        alert('解释权归开发者所有')
    },
    send(){
        this.axios.get('user/sms/'+this.mobile)
        .then(resp=>{
            console.log('smscode>>>>>>',resp)
            if(resp.data.code==200){
                alert(resp.data.msg)
            }else{
                alert(resp.data.msg)
            }
        })
    },
    login(){
        this.axios.post('user/login',{mobile:this.mobile,code:this.code})
        .then(resp=>{
            console.log('login>>>>>>',resp)
            if(resp.data.code==200){
                alert(resp.data.msg)
            }else{
                alert(resp.data.msg)
            }
        })
    }
 }
}
</script>

<style scoped>
.text{
    font-size:x-large;
    color:darkorange;
    padding: 100px 50px;
}

.password_box {
  margin-top: 20px;
  position: relative; /*相对定位的父标签*/
}

.code_tip {
  position: absolute;
  right: 20px;
  top: 8px;
  color: #1579a4;
}
.but{
    font-size:large;
    margin: 20px 0;
    width: 80%;
    height: 45px;
}
.tet{
    color: gray;
}
</style>